<template>
  <div class="common-w-box">
    <div class="cnb">
      <div class="common-slider">
        <el-menu
          default-active=""
          @open="onChangeDataBaseCategory"
          @close="onChangeDataBaseCategory"
        >
          <el-menu-item index="" @click="onChangeDataBaseCategory">
            <template #title>全部分类</template>
          </el-menu-item>
          <el-sub-menu
            :index="item.id"
            v-for="item in dataBaseCateGoryTreeList"
            :key="item.id"
          >
            <template #title>{{ item.databaseCategoryName }}</template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.id"
              :index="child.id"
              @click="onChangeDataBaseCategory"
            >
              {{ child.databaseCategoryName }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="cn-list">
        <template v-if="dataBaseArticles.length < 1">
          <el-empty description="无数据记录" />
        </template>
        <dl v-else v-for="item in dataBaseArticles" :key="item.id">
          <dt>
            <span @click="toDetail(item.id)">
              {{ item.articleName }}
            </span>
          </dt>
          <dd>{{ item.articleSummary }}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import {
  reqGetDataBaseArticles,
  reqGetDataBaseCategory,
} from '@/api/database.ts'
import {
  reqDataBaseArticleBody,
  respDataBaseArticle,
  respDataBaseCategoryTreeData,
} from '@/api/types/database'
import emitter from '@/utils/emitter.ts'
import { arrToTree } from '@/utils/utils.ts'

const router = useRouter()
onMounted(() => {
  getDataBaseCategory()
  getDataBaseArticles()

  emitter.on('searchData', onSearchDataBaseArticle)
})
onUnmounted(() => emitter.off('searchData'))

// 数据库分类
const dataBaseCateGoryId = ref(0)
const dataBaseCateGoryTreeList = ref<respDataBaseCategoryTreeData[]>([])
const getDataBaseCategory = async () => {
  const { data } = await reqGetDataBaseCategory()
  dataBaseCateGoryTreeList.value = arrToTree(data, null, {
    label: 'databaseCategoryName',
    parentId: 'parentCategoryId',
  })
  emitter.emit('dataBaseArticleList', data)
}

const onChangeDataBaseCategory = (event: any) => {
  dataBaseCateGoryId.value = event.index !== undefined ? event.index : event
  getDataBaseArticles()
}

// 数据库分支
/*const dataBaseRootCategorys = ref<respDataBaseRootCategoryData[]>([])
const getDataBaseRootCategory = async () => {
  let reqData: reqGetDataBaseRootCategoryBody = {}
  if (dataBaseCateGoryId.value) reqData.categoryId = dataBaseCateGoryId.value
  if (dataBaseArticleName.value) reqData.articleName = dataBaseArticleName.value
  const { data } = await reqGetDataBaseRootCategory()
  dataBaseRootCategorys.value = data
}*/

// 数据库文章
const dataBaseArticleName = ref('')
const dataBaseArticles = ref<respDataBaseArticle[]>([])
const getDataBaseArticles = async () => {
  let reqData: Partial<reqDataBaseArticleBody> = {}
  if (dataBaseCateGoryId.value) reqData.categoryId = dataBaseCateGoryId.value
  if (dataBaseArticleName.value) reqData.articleName = dataBaseArticleName.value
  const { data } = await reqGetDataBaseArticles(reqData)
  dataBaseArticles.value = data
}

// 搜索
const onSearchDataBaseArticle = (val: reqDataBaseArticleBody) => {
  dataBaseCateGoryId.value = val.categoryId
  dataBaseArticleName.value = val.articleName
  getDataBaseArticles()
}

watch(dataBaseArticleName, (val) => {
  dataBaseArticleName.value = val
  getDataBaseArticles()
})

const toDetail = (id: number) => {
  router.push({ path: '/database/detail', query: { id } })
}
</script>

<style scoped lang="scss">
.database-container {
  .cnb {
    display: flex;
    padding: 16px 0;
  }
  :deep(.el-menu) {
    border-right: none;
  }

  .cn-list {
    flex: 1;
    margin-left: 16px;

    dl {
      padding: 16px 20px;
      margin: 0 0 16px;
      background: #fff;
      border: 1px solid $borderCol;
      border-radius: 4px;

      dt {
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: #021429;

        span {
          cursor: pointer;

          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      dd {
        margin: 16px 0 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #8691a3;
      }
    }
  }
}
</style>
